<template>
  <div>
    <el-card>
      <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="权限值" />
        <el-table-column prop="updateTime" label="修改时间" />
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button v-has="'btn.Permission.add'" v-if="row.level == 1 || row.level == 2" size="small" type="primary" @click="addMenu(row)">添加菜单</el-button>
            <el-button v-has="'btn.Permission.add'" v-else-if="row.level === 3" size="small" type="warning" @click="addMenu(row)">添加功能</el-button>
            <el-button v-has="'btn.Permission.update'" size="small" type="primary" :disabled="row.level == 1" @click="edit(row)">编辑</el-button>
            <el-button v-has="'btn.Permission.remove'" size="small" type="danger" :disabled="row.level == 1" @click="deletePermission(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div>
      <el-dialog v-model="dialogFormVisible" title="添加">
        <el-form :model="MenuData">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="MenuData.name" autocomplete="off" />
          </el-form-item>

          <el-form-item label="权限" :label-width="formLabelWidth">
            <el-input v-model="MenuData.code" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="confirm"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqAllPermisstion, reqAddPermission, reqUpdatePermission, reqRemoveMenu } from '@/utils/api/acl/permission/index'
import type { Permisstion, MenuParams } from '@/utils/api/acl/permission/type'
import { onMounted, reactive, ref } from 'vue'

// 表格数据
const tableData = ref<Permisstion[]>([])
// 添加菜单或者是修改菜单
const MenuData: MenuParams = reactive({
  code: '',
  level: 0,
  name: '',
  pid: 0
})

// 对话框表格的数据
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

onMounted(() => {
  getPermission()
})

// 获取权限管理的数据
const getPermission = async () => {
  const res = await reqAllPermisstion()
  if (res.data.code == 200) {
    tableData.value = res.data.data
  }
}

// 添加菜单
const addMenu = (row: Permisstion) => {
  MenuData.pid = row.id!
  MenuData.level = row.level + 1
  dialogFormVisible.value = true
}

// 清空数据
const clearData = () => {
  Object.assign(MenuData, {
    code: '',
    level: 0,
    name: '',
    pid: 0
  })
}

// 确认按钮
const confirm = async () => {
  // 存在id则为更新
  if (MenuData.id) {
    const res = await reqUpdatePermission(MenuData)
    if (res.data.code == 200) {
      ElMessage.success('更新成功')
      getPermission()
    }
  } else {
    const res = await reqAddPermission(MenuData)
    if (res.data.code == 200) {
      ElMessage.success('添加成功')
      getPermission()
    }
  }
  dialogFormVisible.value = false
  clearData()
}

// 编辑按钮
const edit = (row: Permisstion) => {
  Object.assign(MenuData, row)
  dialogFormVisible.value = true
}

// 删除功能
const deletePermission = async (row: Permisstion) => {
  const res = await reqRemoveMenu(row.id!)
  if (res.data.code == 200) {
    ElMessage.success('删除成功')
    getPermission()
  }
}
</script>

<style scoped></style>
